<template>
  <div ref="boxwrap" class="lotdata-wrap mt-50">
    <div ref="filterwrap" class="filter-container">
      <el-form ref="form" :inline="true" :model="form" size="small">
        <el-form-item label="制程">
          <el-select v-model="form.regionid" placeholder="请选择" class="filter-item" @change="LoadLines()">
            <el-option v-for="item in form.regionArr" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="线别">
          <el-select v-model="form.lineId" placeholder="请选择" class="filter-item">
            <el-option v-for="item in form.lineArr" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="工单号">
          <el-input v-model="form.lotNum" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="料号">
          <el-input v-model="form.partNum" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="生产类型">
          <el-select v-model="form.type" placeholder="请选择" class="filter-item">
            <el-option v-for="(value, key) in productType" :key="key" :label="value" :value="key" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="时间">
          <el-col :span="11">
            <el-date-picker v-model="form.startTime" type="datetime" placeholder="开始时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" @change="handleSearch" />
          </el-col>
          <el-col class="separator" :span="2"> ~ </el-col>
          <el-col :span="11">
            <el-date-picker v-model="form.endTime" type="datetime" placeholder="结束时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" @change="handleSearch" />
          </el-col>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="table-main">
      <div id="printc" class="table-list">
        <!-- <el-table
          :key="tableKey"
          v-loading="listLoading"
          element-loading-text="Loading"
          :data="pageList"
          border
          fit
          style="width: 100%;"
          size="small"
          :height="tableHeight"
          :max-height="tableHeight"
          @current-change="handleSelection"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="table-expand-box">
                <el-form-item v-for="item in expandTableCol" :key="item.prop" :label="item.label">
                  <span>{{ props.row[item.prop] }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="序号" align="center" type="index" width="80" :index="indexMethod" />
          <el-table-column v-for="(item, index) in tableCol" :key="index" :label="item.label" align="center" :width="item.width || ''">
            <template slot-scope="scope">{{ scope.row[item.prop] }}</template>
          </el-table-column>
        </el-table> -->

        <vxe-table
          ref="xTable"
          :loading="listLoading"
          :data="pageList"
          border
          :height="tableHeight"
          :print-config="tablePrint"
          auto-resize
          size="small"
          :seq-config="{startIndex: (pageObj.page - 1) * pageObj.limit}"
        >
          <vxe-column type="expand" width="50">
            <template #content="{ row }">
              <el-form label-position="left" inline class="table-expand-box">
                <el-form-item v-for="item in expandTableCol" :key="item.prop" :label="item.label">
                  <span>{{ row[item.prop] }}</span>
                </el-form-item>
              </el-form>
            </template>
          </vxe-column>
          <vxe-column type="seq" title="序号" width="80" />
          <vxe-column v-for="item in tableCol" :key="item.prop" :field="item.prop" :title="item.label" :width="item.width || ''" />
        </vxe-table>

        <pagination :total="pageObj.total" :page-sizes="pageObj.pageSize" :page.sync="pageObj.page" :limit.sync="pageObj.limit" layout="total, sizes, prev, pager, next" @pagination="getPage" />
      </div>

      <div class="operate-btns">
        <el-button type="primary" plain icon="el-icon-search" @click="handleSearch()">查询</el-button>
        <el-button type="primary" plain icon="el-icon-download" @click="downloadTable">导出</el-button>
        <!-- <el-button type="primary" plain icon="el-icon-printer" @click="printTable">打印</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getProcess, getLineByProcess } from '@/api/conf'
import { getLotnumData } from '@/api/reports'
// import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'

export default {
  name: 'HistoryData',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: [],
      pageList: [],
      listLoading: false,
      productType: { // 生产类型: 0表示量产,1表示特殊件
        0: '量产',
        1: '首件'
      },
      tableHeight: 'auto',
      tableCol: [
        { label: '工单号', prop: 'lotNum' },
        { label: '料号', prop: 'partNum' },
        { label: '工单开始时间', prop: 'scanTime' },
        { label: '工单结束时间', prop: 'endTime' },
        { label: '实际生产数量', prop: 'quantity' },
        { label: '生产类型', prop: 'typeShow', width: 100 }
      ],
      expandTableCol: [
        { label: '工单号', prop: 'lotNum' },
        { label: '料号', prop: 'partNum' },
        { label: '工单开始时间', prop: 'scanTime' },
        { label: '工单结束时间', prop: 'endTime' },
        { label: '实际生产数量', prop: 'quantity' },
        { label: '生产类型', prop: 'typeShow' },
        { label: '操作员ID', prop: 'userId' },
        { label: '显影线线速', prop: 'xianyingSpeed' },
        { label: '线宽', prop: 'lineWidth' },
        { label: '线距', prop: 'lineSpacing' },
        { label: '蚀刻铜厚', prop: 'thickness' },
        { label: '蚀刻铜厚类型', prop: 'thicknessType' },
        { label: '蚀刻线速', prop: 'shikeSpeed' },
        { label: '干膜类型', prop: 'ganmostate' },
        { label: '站别', prop: 'station' },
        { label: '首件数量', prop: 'sjPcs' },
        { label: '向上层次', prop: 'lever' },
        { label: '板厚', prop: 'palte' },
        { label: '尺寸', prop: 'size' }
      ],
      form: {
        regionid: '',
        regionArr: [],
        lineId: '',
        lineArr: [],
        lotNum: '',
        partNum: '',
        type: ''
        // startTime: '',
        // endTime: ''
      },
      listQuery: {
        regionid: 0,
        lineId: 0,
        lotNum: '',
        partNum: '',
        type: ''
        // startTime: '',
        // endTime: ''
      },
      lineQuery: {
        regionid: 0
      },
      soltQuery: {
        lineId: 0
      },
      pageObj: {
        page: 1, // 第几页
        limit: 20, // 每页条数
        total: 0, // 总条数
        pageSize: [20, 40, 60, 80, 100]
      },
      tablePrint: {
        // 自定义打印的样式
        style: `
                .vxe-table {
                  color: #000000; // 修改表格默认颜色
                  font-size: 12px; // 修改表格默认字体大小
                }
                .vxe-table,
                .vxe-table thead th,
                .vxe-table tbody td,
                .vxe-table tfoot td  {
                  border-color: #000000; // 修改表格边框颜色
                }
                .vxe-table thead th {
                  color: #000000; // 修改表头字体颜色
                  font-size: 14px; // 修改表头默认字体大小
                }
                .vxe-table tfoot td {
                  color: #000000; // 修改表尾字体颜色
                }
                `
      }
    }
  },
  watch: {
    // 监听 lineId、slotId变化，清空关联的input值
    'form.lineId': function(newValue, oldValue) {
      this.form.lineId = newValue
    },
    'form.slotId': function(newValue, oldValue) {
      this.form.slotId = newValue
    }
  },
  mounted() {
    this.getTableHeight()
  },
  created() {
    // this.form.startTime = parseTime(new Date().getTime() - 1000 * 60 * 60) // 提前一小时
    // this.form.endTime = parseTime(new Date())
    this.init()
  },
  methods: {
    init() {
      getProcess().then(res => {
        this.form.regionArr = res.data
        this.form.regionid = res.data[0].id
        this.LoadLines()
      })
    },
    LoadLines() {
      this.lineQuery.regionid = this.form.regionid
      getLineByProcess(this.lineQuery).then(res => {
        this.form.lineArr = res.data
        this.form.lineId = res.data[0].id
        this.handleSearch()
      })
    },
    // 查询
    handleSearch() {
      this.listLoading = true
      this.listQuery = {
        regionid: this.form.regionid,
        lineId: this.form.lineId,
        lotNum: this.form.lotNum,
        partNum: this.form.partNum,
        type: this.form.type
        // startTime: this.form.startTime,
        // endTime: this.form.endTime
      }
      getLotnumData(this.listQuery).then(res => {
        this.list = res.data
        this.pageObj.total = res.data.length
        this.getPage()
        this.listLoading = false
      }).catch(error => {
        if (error) {
          this.listLoading = false
        }
      })
    },
    getPage() {
      this.pageList = this.list.filter((item, index) => {
        return index < this.pageObj.limit * this.pageObj.page && index >= this.pageObj.limit * (this.pageObj.page - 1)
      })
    },
    indexMethod(index) { // 表格序号方法,翻页后序号连续
      return (index + 1) + (this.pageObj.page - 1) * this.pageObj.limit
    },
    getTableHeight() {
      const that = this
      const dom = this.$refs.boxwrap
      const filterwrap = this.$refs.filterwrap
      this.$erd.listenTo(dom, function(element) {
        that.tableHeight = dom.clientHeight - filterwrap.clientHeight - 50
      })
    },
    downloadTable() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        // 表头str
        const tHeader = ['序号']
        // 表头字段
        const filterVal = ['index']
        this.expandTableCol.forEach(item => {
          tHeader.push(item.label)
          filterVal.push(item.prop)
        })
        const list = this.list // 未分页的全部数据
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '工单数据'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v, idx) => filterVal.map(j => {
        v.index = idx + 1
        return v[j]
      }))
    },
    printTable() {
      // const cols = []
      // this.expandTableCol.forEach(val => {
      //   cols.push({field: val.prop , title: val.label})
      // })
      // console.log(cols)
      this.$refs.xTable.print({ data: this.list })
    }
  }
}
</script>
<style lang="scss" scoped>
  .lotdata-wrap{
    height: calc(100% - 50px);
  }
  .dialog-form{
    width: 90%;
    margin:0 auto;
  }
  .el-form-item--small.el-form-item{
    margin-bottom: 5px;
  }

</style>
